import React, { memo } from 'react';
import { Form, Input, Select, DatePicker, Row, Col, Space, Button } from 'antd';

import { IProFormProps } from '../types';

const { Option } = Select;
const { RangePicker } = DatePicker;

export default memo(function ProForm(props: IProFormProps): JSX.Element | null {
  const { formItems, colLayout, formSlot, onFinish } = props;

  const useFormItem = (item: any): JSX.Element | null => {
    const { type, label, placeholder, options, otherOptions, rules, name } =
      item;

    // 根据type生成对应form组件
    const typeMapFormItem: any = {
      input: () => <Input placeholder={placeholder} />,
      password: () => <Input.Password placeholder={placeholder} />,
      select: () => (
        <Select placeholder={placeholder}>
          {options.map((option: any) => (
            <Option value={option.value} key={option.value}>
              {option.label}
            </Option>
          ))}
        </Select>
      ),
      datepicker: () => (
        <DatePicker {...otherOptions} style={{ width: '100%' }} />
      ),
      rangepicker: () => (
        <RangePicker {...otherOptions} style={{ width: '100%' }} />
      )
    };
    // 合并colLayout
    const colLayoutConfig = Object.assign(
      {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
        lg: { span: 8 },
        xl: { span: 6 },
        xxl: { span: 6 }
      },
      colLayout
    );

    return (
      <Col key={label} {...colLayoutConfig}>
        <Form.Item label={label} rules={rules} name={name}>
          {typeMapFormItem[type]()}
        </Form.Item>
      </Col>
    );
  };

  const renderHeader = () => {
    if (formSlot && formSlot.header) {
      return formSlot.header();
    }
  };
  const renderFooter = () => {
    if (formSlot && formSlot.footer) {
      return formSlot.footer();
    }
    return (
      <Space>
        <Button type="primary" htmlType="submit">
          搜索
        </Button>
        <Button onClick={() => form.resetFields()}>重置</Button>
      </Space>
    );
  };

  // 移除自定义属性 进行传递
  const antdFormProps: any = { ...props };
  delete antdFormProps.formItems;

  const [form] = Form.useForm();

  return (
    <div>
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        {...antdFormProps}
        onFinish={onFinish}
      >
        <div>{renderHeader()}</div>
        <Row gutter={[10, 10]}>
          {formItems.map(useFormItem)}
          <div style={{ marginLeft: 'auto' }}>{renderFooter()}</div>
        </Row>
      </Form>
    </div>
  );
});
/*

  type typeMapElement = {
      input: () => JSX.Element
      password: () => JSX.Element
      select: () => JSX.Element
      datepicker: () => JSX.Element
      rangepicker: () => JSX.Element
    }

  switch (type) {
      case 'input':
        return (
          <Col
            key={label}
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
            xl={{ span: 6 }}
            xxl={{ span: 6 }}
          >
            <Form.Item label={label} rules={rules}>
              <Input placeholder={placeholder} />
            </Form.Item>
          </Col>
        )
      case 'password':
        return (
          <Col
            key={label}
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
            xl={{ span: 6 }}
            xxl={{ span: 6 }}
          >
            <Form.Item label={label} rules={rules}>
              <Input.Password placeholder={placeholder} />
            </Form.Item>
          </Col>
        )
      case 'select':
        return (
          <Col
            key={label}
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
            xl={{ span: 6 }}
            xxl={{ span: 6 }}
          >
            <Form.Item label={label} rules={rules}>
              <Select placeholder={placeholder}>
                {options.map((option: any) => (
                  <Option value={option.value} key={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        )
      case 'datepicker':
        return (
          <Col
            key={label}
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
            xl={{ span: 6 }}
            xxl={{ span: 6 }}
          >
            <Form.Item label={label} rules={rules}>
              <DatePicker {...otherOptions} />
            </Form.Item>
          </Col>
        )
      case 'rangepicker':
        return (
          <Col
            key={label}
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
            xl={{ span: 6 }}
            xxl={{ span: 6 }}
          >
            <Form.Item label={label} rules={rules}>
              <RangePicker {...otherOptions} />
            </Form.Item>
          </Col>
        )
      default:
        return null
    }
*/
